<template>
  <el-dialog :visible.sync="visible" v-dialogDrag :title="title" class="tl-dialog" width="1200px" @open="open" @close="close" top="10px" :append-to-body="true" :modal-append-to-body="true">
    <div style="padding-bottom:10px">
      <el-row>
        <el-col :span="6" class="tl-left-tree">
          <!-- 树 -->
          <el-input v-model="queryTreeParam.qry_name" placeholder="请输入文件名称" @keyup.enter.native="filterTree" ref="treeSearch">
            <el-button current-node-key="" slot="append" icon="el-icon-search" @click="filterTree"></el-button>
          </el-input>
          <el-scrollbar ref="treeScroll" :style="{ height: treeHeight + 'px' }" resizable-key="treeHeight" :resizable-reduce="20" :resizable-refs="['treeSearch']">
            <el-tree class="tl-tree" ref="tree" :data="treeData" node-key="id" :default-expand-all="true" highlight-current :expand-on-click-node="false" @node-click="doTreeQuery" :filter-node-method="filterTreeNode"></el-tree>
          </el-scrollbar>
        </el-col>
        <el-col :span="18">
          <el-card>
            <el-row>
              <el-table ref="mainTable" class="tl-table" :height="tableHeight" resizable-key="tableHeight" :resizable-reduce="42" :resizable-refs="tableResizeRefs" v-loading="loading" :data="datas" style="width: 100%;" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowDbClick" row-key="id" border fit :row-class-name="doChangeRowClassName" >
                <el-table-column type="index" label="序号" width="55px"> </el-table-column>
                <el-table-column prop="name" label="文件名称" min-width="200px" sortable="custom" sort-by="name"></el-table-column>
                <el-table-column prop="version" label="版本号" width="150px" sortable="custom" sort-by="name"></el-table-column>
                <el-table-column prop="modifiedon" label="更新时间" width="200px" sortable="custom" sort-by="name"></el-table-column>
                <el-table-column prop="groupid" label="分组id" v-if="false" width="100px" sortable="custom" sort-by="name"></el-table-column>
                <el-table-column label="操作" width="80px" align="center" fixed="right" v-if="isSingleSelect === true">
                  <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-finished" @click="doSelectData(scope.row[fieldDefaultKey])">选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
            <!-- 列表分页 -->
            <el-row class="pagebar" ref="pager">
              <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer" v-if="isSingleSelect === false">
      <el-button type="text" @click="doCancelEdit">取消</el-button>
      <el-button type="primary" @click="doConfirm">确认</el-button>
    </div>
  </el-dialog>
</template>
<script>
/** mixins */
import { mixin_tree_list } from "@tapui/mixins/mixin_tree_list"
import { mixin_ref_list } from '@tapui/mixins/mixin_ref_list'
/** 子组件 */
import { getAction, putAction, postAction } from '@tapui/utils/http'
export default {
  name: 'TlFileRef',
  components: {},
  mixins: [mixin_tree_list, mixin_ref_list],
  data() {
    return {
      description: '文件参照页面',
      // 默认Key字段名
      fieldDefaultKey: 'id',
      // 默认显示字段名
      fieldDefaultValue: 'name',
      // 是否在页面创建时执行查询
      isQueryOnCreated: false,
      urlPrefix: '/base/processDocumentInfo/',
      url: {
        queryTree: '/base/processDocumentInfo/queryFileTreeList',
        list: '/base/processDocumentInfo/fileList'
      },
      sorterInfo: { // 排序参数
        sidx: 'createon',
        sord: 'desc'
      }
    }
  },
  methods: {
    /** 打开对话框 */
    open() {
      // 防止左树不显示
      setTimeout(() => {
        this.loadTree({}).then(() => {
          this.$refs.tree.setCurrentKey(0)
          this.doTreeQuery(this.$refs.tree.getCurrentNode())
        })
      }, 1000)
    }
  },
  /** 防止minin_tree_list遮幕一直显示 **/
  mounted() {
    if (!this.isQueryOnCreated) {
      this.closeLoading()
    }
  }
}
</script>
<style lang="scss" scoped></style>
